<template>
  <el-dialog title="二维码详情" v-model="visible" width="400">
    <el-image
      style="min-width: 100px; min-height: 100px"
      :src="asscoiationCode"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[asscoiationCode]"
      fit="cover"
    />
  </el-dialog>
</template>

<script setup>
import { toDataURL } from 'qrcode'

async function generateQRCode(text) {
  try {
    const qrCodeImage = await toDataURL(text, { errorCorrectionLevel: 'H' })
    console.log(qrCodeImage)
    asscoiationCode.value = qrCodeImage
    // 在这里可以将qrCodeImage展示给用户，比如通过创建一个img标签
  } catch (error) {
    console.error(error)
  }
}
const visible = ref(false)
const asscoiationCode = ref('')
function init(code) {
  generateQRCode(code)
  visible.value = true
}

defineExpose({ init })
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: center;
}
.component-upload-image {
  text-align: center;
}
.update-button {
  text-align: center;
}
</style>
